<template>
  <div class="home">
    <!-- 地图定位 -->
    <div class="top">
      <i class="iconfont icon-dingwei"></i>
      <router-link to="/map" tag="div" class="title">快乐家园营业部</router-link>
      <span class="iconfont icon-jiantouxia"></span>
    </div>

    <!-- 轮播图 -->
    <div class="bannerbox" v-if="datas">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <router-link :to="{name:'microtravel',query:{data:item} }" tag="van-swipe-item" v-for="item in datas.bannerboxList" :key="item.id">
          <img :src="item.imgurl" />
        </router-link>
      </van-swipe>
    </div>

    <!-- 目的地/景点 -->
    <div class="place">
      <div class="input">
        <span class="iconfont icon-dingwei1"></span>
        <h2>上海</h2>
        <input type="text" placeholder="输入目的地/景点等" />
      </div>

      <!-- 选择最早/最晚出发时间 -->
      <div class="input">
        <van-cell :value="date" @click="show = true" />
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
      </div>
      <!--不限 跟团游 自由行-->
      <div class="checked">
        <div class="item" @click="index = 1">
          <span :class="index == 1 ? 'img' : ''"></span>不限
        </div>
        <div class="item" @click="index = 2">
          <span :class="index == 2 ? 'img' : ''"></span>跟团游
        </div>
        <div class="item" @click="index = 3">
          <span :class="index == 3 ? 'img' : ''"></span>自由行
        </div>
      </div>

      <!-- 跳转到列表页 -->
      <div class="search">
        <router-link :to="'/searchlist?id='+index" tag="a" href="#"><button>搜索</button></router-link>
      </div>
    </div>

    <!-- 分类列表 -->
    <div class="manner" v-if="datas">
      <router-link :to="'/grouptours?id='+item.id" tag="div" v-for="item in datas.mannerList" :key="item.id" class="item">
        <img :src="item.imgurl" alt="" />
        <span>{{ item.name }}</span>
      </router-link>
    </div>

    <!-- 广告 -->
    <router-link to="/" tag="div" class="ad">
      <img src="../assets/img/ia_100000066.png" alt="" />
    </router-link>

    <!-- 推荐列表 -->
    <div class="suggestList" v-if="datas">
      <!-- 标题索引 -->
      <div class="title">
        <ul>
          <li
            v-for="item in datas.recommendList"
            :key="item.id"
            :class="listId == item.id ? 'active' : ''"
            @click="reviseData(item.id)"
          >
            <div class="item">
              <h1>{{ item.title }}</h1>
              <p>{{ item.name }}</p>
              <img :src="item.imgurl" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 底部列表 -->
      <recommended-list v-if="datas" :datalists="datalists" ></recommended-list>

    </div>
    <footer-nav></footer-nav>

  </div>
</template>

<script>
import  FooterNav  from "../components/FooterNav.vue";
import RecommendedList from "../components/RecommendedList.vue";
import { getHomepageBall } from "../api/home";

//大数据


export default {
  components: {
    RecommendedList,
    FooterNav,
  },
  data() {
    return {
      datas:null,
      datalists:null,
      // 日历
      date: "可选最早/最晚出发时间",
      show: false,
      // 旅游形式
      index:1,
      // 底部列表
      dataIndex:0,
      // 底部选择下标
      listId:1,
    };
  },
  methods: {

    getIndex(){
      this.dataIndex = this.listId-1<4?this.listId-1:this.dataIndex;

    },
    //拿数据
    getHomepageBallFun(){
      getHomepageBall().then(data=>{
        this.datas = data.data
        this.datalists = data.data.dataLists[0].Attractions
        
      })
    },
    // 起始日历
    formatDate(date) {
      return `${date.getMonth() + 1}月${date.getDate()}`;
    },
    // 结束日历
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)}日- ${this.formatDate(end)}日`;
    },
    //底部列表数据切换
    reviseData(id){
      this.listId = id;
      if(id==5){
        console.log(1);
      }else{

        this.datalists =this.datas.dataLists[this.listId-1].Attractions
      }
      // this.dataIndex = id-1;
    }
  },
  created() {

    // this.getDatas()

    this.getHomepageBallFun()
  },
  
};
</script>

<style lang="scss" scoped>
.home {
  .bannerbox {
    overflow: hidden;

    .my-swipe {
      margin-left: 8px;
      margin-right: 15px;
      overflow: none;
      .van-swipe-item {
        color: #fff;
        float: left;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
        img {
          border-radius: 8px;
          width: 100%;
          margin: 0 8px;
        }
      }
    }
  }

  .top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 42px;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #9e9e9e;
    }
    i {
      font-size: 13px;
      color: #80d7d1;
    }
    .title {
      font-size: 14px;
      margin-left: 7px;
      margin-right: 13px;
    }
  }

  .place {
    margin: 0 15px;
    border-radius: 7px;
    margin-top: 5px;
    box-shadow: 0 3px 5px #ccc;
    padding-bottom: 15px;
    .input {
      display: flex;
      height: 46px;
      display: flex;
      align-items: center;
      margin: 0 18px;
      border-bottom: 1px solid #eee;
      span {
        font-size: 12px;
        margin-right: 10px;
      }
      h2 {
        font-weight: normal;
        margin-right: 15px;
        font-size: 18px;
      }
      .van-cell {
        padding: 0;
        &::after {
          display: none;
        }
        span {
          font-size: 18px;
        }
      }
      input {
        outline: none;
        border: none;
        border-left: 1px solid #ccc;
        height: 18px;
        font-size: 16px;
        text-indent: 1em;
      }
    }
    .checked {
      display: flex;
      margin: 0 18px;
      height: 35px;
      .item {
        display: flex;
        align-items: center;
        margin-right: 25px;
        font-size: 12px;
        span {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          display: block;
          border: 0.1px solid #ccc;
          box-sizing: border-box;
          margin-right: 8px;
        }
        .img {
          background: url("../assets/img/ia_100000003.png") no-repeat;
          background-size: cover;
        }
      }
    }
    .search {
      margin: 0 18px;
      button {
        height: 40px;
        border: none;
        border-radius: 6px;
        background-color: #80d7d1;
        width: 100%;
        color: #fff;
        font-size: 16px;
      }
    }
  }
  .manner {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    .item {
      display: flex;
      flex-direction: column;
      width: 25%;
      height: 75px;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      img {
        width: 47px;
        height: 41px;
      }
    }
  }

  .ad {
    padding: 0 15px;
    overflow: hidden;
    margin-top: 14px;
    img {
      width: 100%;
      border-radius: 8px;
      display: block;
    }
  }
  .suggestList {
    margin: 15px;
    margin-top: 18px;
    margin-bottom: 55px;
    .title {
      position: sticky;
      overflow-x: scroll;
      top: 0;
      z-index: 1;
      background-color: #fff;
      height: 65px;
      ul {
        position: absolute;
        overflow-x: scroll;
        top: 0;
        left: 0;
        display: flex;
        li {
          width: 98px;

          .item {
            border: 1px solid #ccc;
            border-radius: 5px;
            color: #333;
            position: relative;
            margin-right: 10px;
            box-shadow: 0 1.4px 6.1px 0 rgb(176 176 176 / 50%);
            h1 {
              font-weight: normal;
              font-size: 14px;
              margin: 0 9px;
              padding-top: 7px;
            }
            p {
              margin-left: 9px;
              font-size: 12px;
              margin-bottom: 5px;
              margin-top: 5px;
            }
            img {
              position: absolute;
              bottom: 5px;
              right: 5px;
              display: block;
              width: 13px;
              height: 13px;
            }
          }
        }
        .active {
          .item {
            border-color: #fd6003;
            h1 {
              font-size: 17px;
            }
          }
        }
      }
    }
  }
}
</style>